<template>
  <el-dialog
    title="配置驳回选项数据源"
    :model-value="modelValue"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    width="500px"
    @close="close"
  >
    <div class="select-option">
      <p class="title row">
        <el-button type="primary" @click="add">新增</el-button>
      </p>
      <el-table :data="list" height="250" border style="width: 100%">
        <el-table-column prop="value" label="数据值（value）">
          <template v-slot="scope">
            <el-input
              class="value"
              :model-value="scope.row.value"
              @input="change('value', $event, scope.$index)"
              placeholder="请输入"
            />
          </template>
        </el-table-column>
        <el-table-column prop="label" label="数据名（label）">
          <template v-slot="scope">
            <el-input
              class="value"
              :model-value="scope.row.label"
              @input="change('label', $event, scope.$index)"
              placeholder="请输入"
            />
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作" width="71px" header-align="center">
          <template v-slot="scope">
            <el-popconfirm
              width="220"
              confirm-button-text="确认"
              cancel-button-text="取消"
              title="确定删除吗？"
              @confirm="remove(scope.$index)"
            >
              <template #reference>
                <el-button type="danger" text>
                  <i class="icon iconfont" style="cursor: pointer">&#xe718;</i>
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="btn-group">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
interface FormItem {
  field: string
  name: string
  type: number
  options: any[]
}
const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue', 'update:options'])
const list = ref<any[]>([])
const formItemIndex = ref<number>(0)
const verify = (index: number) => {
  const obj = list.value[index]
  const repeat = list.value.filter((el, i) => i != index).find((el) => el.value === obj.value)
  if (repeat) {
    ElMessage.error('输入数据值重复')
    return false
  } else {
    return true
  }
}
const change = (key: string, value: string, index: number) => {
  if (!verify(index)) return
  list.value = list.value.map((el, i) => {
    if (i === index) {
      el[key] = value
    }
    return el
  })
}
// 新增
const add = () => {
  list.value.push({
    value: '',
    label: ''
  })
}
// 移除
const remove = (index: number) => {
  list.value = list.value.filter((el, i) => {
    return index != i
  })
  ElMessage({
    type: 'success',
    message: '删除成功!'
  })
}
// 确认
const submit = () => {
  const isFinished = list.value.every((el) => {
    return el.label && el.value
  })
  if (!isFinished) {
    return ElMessage.error('请完善数据源信息')
  }
  emits('update:options', { key: 'options', value: list.value, index: formItemIndex.value })
  emits('update:modelValue', false)
}
// 取消
const close = () => {
  emits('update:modelValue', false)
}
defineExpose({
  setOptions: (row: FormItem, index: number) => {
    formItemIndex.value = index
    list.value = JSON.parse(JSON.stringify(row.options))
  }
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  color: #2d2d2d;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.btn-group {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
